<template>
  <ul v-if="foot">
    <li class="content" v-for="(item,index) in foot" :key="index">
      <h3>
        {{item.name}}
        <i @click="jumpcategory(item.id)">更多 +</i>
      </h3>
      <ol>
        <li
          v-for="itemcon in item.data"
          :key="itemcon.id"
          @click="jumpDetails(itemcon.id,itemcon.pid,itemcon)"
        >
          <!-- <img v-lazyload="itemcon.image" src="@/assets/logo/loading.png" :alt="itemcon.name"> -->
          <!-- <img :src="itemcon.image"> -->
          <img :src="itemcon.image?itemcon.image:defaultNoImage" :onerror="defaultImg">
          
          <p>{{ itemcon.name }}</p>
          <p>￥{{ itemcon.price }}</p>
        </li>
      </ol>
    </li>
  </ul>
  <div v-else class="NofootList">暂无商品数据</div>
</template>
<script>
import goods from "../../../assets/images/goods1.png"
export default {
  name: "BottomGoods",

  data() {
    return {
      defaultNoImage: require('../../../assets/logo/loading.png'),
      defaultImg: 'this.src="' + require('../../../assets/logo/loading.png') + '"',
      foot: [],
      // lists :[
      //     {
      //         title : '五金类',
      //         list : [
      //             {
      //                 imgSrc : goods,
      //                 title : 'SUS304定位销',
      //                 price : '301.90',
      //                 id :0
      //             },{
      //                 imgSrc : goods,
      //                 title : 'SUS304定位销',
      //                 price : '301.90',
      //                 id :1
      //             },{
      //                 imgSrc : goods,
      //                 title : 'SUS304定位销',
      //                 price : '301.90',
      //                 id :2
      //             },{
      //                 imgSrc : goods,
      //                 title : 'SUS304定位销',
      //                 price : '301.90',
      //                 id :3
      //             }
      //         ],
      //         id : '001'
      //     },{
      //         title : '工具类',
      //         list : [
      //             {
      //                 imgSrc : goods,
      //                 title : 'SUS304定位销',
      //                 price : '301.90',
      //                 id :0
      //             },{
      //                 imgSrc : goods,
      //                 title : 'SUS304定位销',
      //                 price : '301.90',
      //                 id :1
      //             },{
      //                 imgSrc : goods,
      //                 title : 'SUS304定位销',
      //                 price : '301.90',
      //                 id :2
      //             },{
      //                 imgSrc : goods,
      //                 title : 'SUS304定位销',
      //                 price : '301.90',
      //                 id :3
      //             }
      //         ],
      //         id : '002'
      //     },{
      //         title : '道具辅具磨具类',
      //         list : [
      //             {
      //                 imgSrc : goods,
      //                 title : 'SUS304定位销',
      //                 price : '301.90',
      //                 id :0
      //             },{
      //                 imgSrc : goods,
      //                 title : 'SUS304定位销',
      //                 price : '301.90',
      //                 id :1
      //             },{
      //                 imgSrc : goods,
      //                 title : 'SUS304定位销',
      //                 price : '301.90',
      //                 id :2
      //             },{
      //                 imgSrc : goods,
      //                 title : 'SUS304定位销',
      //                 price : '301.90',
      //                 id :3
      //             }
      //         ],
      //         id : '003'
      //     }
      // ]

    }
  },

  methods: {
    jumpcategory(ev) {
      this.$router.push({
        name: "productList",
        params: {
          id: ev
        }
      })
    },

    jumpDetails(id, pid, item) {
      let temp = item
      temp.goods_title = item.name
      this.$router.push({
        name: "productDetails",
        params: {
          id,
          pid,
          item:temp
        }
      })
    }
  },

  mounted() {
    this.foot = Object.assign(this.$store.state.homeDisplay.foot, [])  //底部的三个部分
  }
}
</script>
<style lang="scss" scoped>
.NofootList {
  width: 1200px;
  margin: auto;
  font-size: 50px;
  text-align: center;
  line-height: 200px;
  border: 1px solid #eee;
  color: #eaecee;
}
ul {
  width: 1200px;
  height: 444px;
  margin: auto;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .content {
    width: 382px;
    height: 400px;
    h3 {
      background: #0a83e7;
      color: #fff;
      font-size: 18px;
      text-indent: 30px;
      line-height: 46px;
      letter-spacing: 1px;
      cursor: pointer;
      i {
        float: right;
        font-size: 12px;
        padding-right: 6px;
        font-weight: normal;
        &:hover {
          color: rgb(243, 241, 241);
          font-size: 12.1px;
          transition: all 0.2s;
        }
      }
    }
    ol {
      width: 381px;
      height: 399px;
      border-left: 1px solid #e5e5e5;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      li {
        width: 189.5px;
        height: 198.5px;
        border-bottom: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        cursor: pointer;
        &:hover img {
          opacity: 0.8;
        }
        img {
          width: 106px;
          height: 106px;
          display: block;
          margin: auto;
          margin-top: 16px;
        }
        p {
          padding: 0 5px;
          text-align: center;
          font-size: 14px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          &:last-child {
            color: #fe2121;
            font-size: 16px;
            font-weight: 800;
            line-height: 36px;
          }
        }
      }
    }
  }
  .content2 {
    h3 {
      background: #530ae7;
    }
  }
  .content3 {
    h3 {
      background: #0abbe7;
    }
  }
}
</style>